<template>
  <div class="navdrawer">
    <div>
      <div class="nav-close">
        <div
          class="navbar-toggle"
          :class="isClose ? 'active' : ''"
          @click="handleClose"
        >
          <span class="menu-icon1"></span>
          <span class="menu-icon2"></span>
          <span class="menu-icon3"></span>
        </div>
      </div>
      <div class="nav-bar">
        <menu-list :navbarList="navbarList"></menu-list>
      </div>
      <div class="nav-bar" v-if="isLogin">
        <UserList :navbarList="navbarList"></UserList>
      </div>
      <div class="nav-login" v-else>
        <div class="login" @click="handleGoLogin">登录</div>
        <div class="register">注册</div>
      </div>
      <div class="nav-search">
        <input
          type="text"
          name=""
          id=""
          placeholder="输入关键词搜索..."
          v-model="searchValue"
          @keydown.enter="handleSearch"
        />
        <el-button
          slot="append"
          icon="el-icon-search"
          @click="handleSearch"
        ></el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { mapMutations, mapState } from "vuex";
import MenuList from "./menu/MenuList.vue";
import UserList from "./menu/UserList.vue";
export default {
  name: "NavDrawer",
  components: { MenuList, UserList },
  props: {
    navbarList: Array,
  },
  data() {
    return {
      activePath: "/",
      cactivePath: "",
      ccactivePath: "",
      searchValue: "",
      isLogin: false,
    };
  },
  watch: {
    userInfo(){
      this.isLogin = this.userInfo.id ? true : false;
    }
  },
  computed: {
    ...mapState(["isClose","userInfo"]),
  },
  created() {
    this.isLogin = this.userInfo.id ? true : false;
    if (this.$route.name == "search" || this.$route.name == "search-page") {
      this.searchValue = this.$route.params.keyword;
    }
  },
  methods: {
    ...mapMutations(["handleClose"]),
    handleGoLogin() {
      this.$router.push("/login");
    },
    //搜索
    handleSearch() {
      this.$router.push(`/search/${this.searchValue}`);
      this.handleClose();
    },
  },
};
</script>

<style lang="less" scoped>
.navdrawer {
  > div {
    // height: 100vh;
    overflow: auto;
    color: #fff;
    background: #0088cc;
    .nav-close {
      width: 100%;
      height: 50px;
      display: flex;
      align-items: center;
      justify-content: right;
      position: sticky;
      top: 0;
      z-index: 99;
      background: #0088cc;
      .navbar-toggle {
        display: block;
        position: relative;
        width: 40px;
        height: 40px;
        box-sizing: border-box;
        span {
          display: block;
          width: 20px;
          height: 2px;
          background: #fff;
          transition: transform 0.5s;
        }
        .menu-icon2 {
          margin-top: 5px;
        }
        .menu-icon3 {
          margin-top: 5px;
        }
      }
      .navbar-toggle.active {
        span {
          position: absolute;
          top: 20px;
          left: 10px;
          margin: 0;
        }
        .menu-icon1 {
          transform: rotate(45deg);
        }
        .menu-icon2 {
          display: none;
        }
        .menu-icon3 {
          transform: rotate(-45deg);
        }
      }
    }
    // .nav-bar {
    //   ul {
    //     cursor: pointer;
    //     background: #007cba;
    //     overflow: hidden;
    //     li {
    //       position: relative;
    //       min-height: 50px;
    //       line-height: 50px;
    //       box-sizing: border-box;
    //       background: #0088cc;
    //       &:hover {
    //         background: #1a94d1;
    //       }
    //       div {
    //         width: 97%;
    //         border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    //         padding-left: 20px;
    //         position: relative;
    //         span {
    //           position: absolute;
    //           top: 0;
    //           right: 0;
    //           width: 40px;
    //           height: 30px;
    //           line-height: 30px;
    //           margin-top: 10px;
    //           text-align: center;
    //           padding: 0 5px;
    //           margin-right: 5px;
    //           border-left: 1px solid rgba(0, 0, 0, 0.1);
    //           i {
    //             display: block;
    //             font-size: 25px;
    //             color: rgba(255, 255, 255, 0.7);
    //             transform: rotate(0);
    //             transition: transform 0.5s;
    //             width: 57px;
    //             height: 50px;
    //             line-height: 50px;
    //             margin-top: -10px;
    //             margin-left: -5px;
    //           }
    //         }
    //       }
    //       ul {
    //         height: 0;
    //         margin-left: 5px;
    //         background: #007cba;
    //         li {
    //           border-radius: 3px;
    //           background: #0081c2;
    //           ul {
    //             height: 0;
    //             background: #007cba;
    //             li {
    //               background: #007ab8;
    //             }
    //           }
    //         }
    //       }
    //     }
    //     li.active {
    //       background: #1a94d1;
    //     }
    //     li.openid {
    //       > ul {
    //         height: initial;
    //       }
    //       > div > span > i {
    //         transform: rotate(180deg);
    //       }
    //     }
    //   }
    // }
    .nav-login {
      width: 100%;
      display: flex;
      justify-content: space-between;
      margin: 20px 0 30px;
      padding: 20px;
      box-sizing: border-box;
      font-size: 14px;
      div {
        height: 38px;
        line-height: 38px;
        width: 48%;
        text-align: center;
        background: #1a94d1;
        color: rgba(255, 255, 255, 0.9);
        cursor: pointer;
        &:hover {
          color: rgba(255, 255, 255, 1);
          background: #2c9cd5;
        }
      }
    }
    .nav-search {
      position: relative;
      padding: 20px;
      box-sizing: border-box;
      input {
        width: 100%;
        height: 36px;
        box-sizing: border-box;
        border: 1px solid #fff;
        outline: none;
        padding: 5px 52px 5px 10px;
        font-size: 14px;
        // &:focus {
        //   border: 1px solid #0088cc;
        // }
        &::-webkit-input-placeholder {
          color: #abb8c3;
        }
      }
      .el-button {
        position: absolute;
        right: 20px;
        width: 42px;
        height: 36px;
        padding: 0;
        box-sizing: border-box;
        color: #fff;
        border-radius: 0;
        outline: none;
        border: 1px solid #fff;
        /deep/.el-icon-search {
          color: #515151;
          font-size: 18px;
        }
      }
    }
  }
}
</style>